import { HTMLAttributes } from 'react';
import { cn } from '@/utils/cn-merge';

interface Props extends HTMLAttributes<HTMLDivElement> {
  active?: boolean;
  hover?: boolean;
  bgColor?: string;
  disabled?: boolean;
  showCheck?: boolean;
  type?: 'hover' | 'active';
  boxShadow?: boolean;
  role?: string;
  tabIndex?: number;
  'aria-label'?: string;
  'aria-describedby'?: string;
}

const GradientDiv = ({
  children,
  className,
  active = false,
  hover = true,
  bgColor = 'white',
  disabled = false,
  onClick,
  showCheck = true,
  boxShadow = true,
  type = 'hover',
  role = 'button',
  tabIndex = 0,
  'aria-label': ariaLabel,
  'aria-describedby': ariaDescribedby,
  ...props
}: Props) => {
  const hoverClass = hover ? 'hover:border-@brand-color-hover cursor-pointer' : '';

  const disabledClass = disabled ? 'cursor-not-allowed' : 'cursor-pointer';

  // 处理键盘事件
  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
    if (disabled) return;

    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      onClick?.(e as any);
    }
  };

  return (
    <div
      {...props}
      role={role}
      tabIndex={disabled ? -1 : tabIndex}
      aria-label={ariaLabel}
      aria-describedby={ariaDescribedby}
      aria-disabled={disabled}
      className={cn(
        'relative rounded-xl',
        className,
        disabled ? disabledClass : hoverClass,
        type === 'hover' ? 'cursor-pointer hover:border-@brand-color-hover' : '',
      )}
      onClick={disabled ? undefined : onClick}
      onKeyDown={handleKeyDown}
      style={
        active
          ? {
              background: `linear-gradient(${bgColor}, ${bgColor}) padding-box, linear-gradient(90deg, #1B6DFA 0%, #00D0FE 181.25%) border-box`,
              border: '2px solid transparent',
              boxShadow: boxShadow ? '0px 8px 16px 0px #056EFF29' : '',
            }
          : {
              border: '2px solid transparent',
              boxShadow: boxShadow ? `inset 0 0 0 1px var(--line-2)` : '',
            }
      }
      onMouseEnter={(e) => {
        if (!disabled && !active && hover) {
          if (type === 'hover') {
            e.currentTarget.style.background = `linear-gradient(${bgColor}, ${bgColor}) padding-box, linear-gradient(90deg, #1B6DFA 0%, #00D0FE 181.25%) border-box`;
            e.currentTarget.style.border = '2px solid transparent';
            e.currentTarget.style.boxShadow = boxShadow ? '0px 8px 16px 0px #056EFF29' : '';
          } else {
            e.currentTarget.style.boxShadow = boxShadow
              ? `inset 0 0 0 1px var(--brand-color-hover)`
              : '';
          }
        }
      }}
      onMouseLeave={(e) => {
        if (!disabled && !active) {
          if (type === 'hover') {
            e.currentTarget.style.background = '';
            e.currentTarget.style.border = '2px solid transparent';
            e.currentTarget.style.boxShadow = boxShadow ? `inset 0 0 0 1px var(--line-2)` : '';
          } else {
            e.currentTarget.style.boxShadow = boxShadow ? `inset 0 0 0 1px var(--line-2)` : '';
          }
        }
      }}
    >
      {children}
    </div>
  );
};

export default GradientDiv;
